<template>
  <div>
    <div class="gray">
      <div class="white">
        <div class="zc_k">
          <div class="title">忘记密码</div>
          <ul>
            <li class="mobile">
              <label>手机号</label>

              <input type="text" v-model=" mobile" />
              <!-- <p class="phone_tip">仅支持中国大陆手机号</p> -->
              <p v-show="mobile_err">手机号长度不正确</p>
            </li>
            <li>
              <label>验证码</label>
              <input class="yzm_input" type="text" v-model="yzm" />
              <span class="yzm_button" @click="getCode">
                <span v-show="show">获取验证码</span>

                <span v-show="!show" class="count">{{count}} s</span>
              </span>
            </li>
            <li class="upwd">
              <label>输入新密码</label>
              <input type="text" v-model="logpwd" />
              <p v-show="logpwd_err">长度为8-16位，必须包含数字字母</p>
            </li>
            <li class="zc_bg">
              <p @click="xiugai()">立即修改</p>
            </li>
          </ul>
          <div style="clear: both;"></div>
        </div>
      </div>
    </div>
    <foot2></foot2>
  </div>
</template>

<script>
import foot2 from "../../components/foot2";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      message: "",
      yzm: "",
      mobile: "",
      mobile_err: false,
      logpwd: "",

      logpwd_err: false,
      // logpwd2: "",

      // logpwd2_err: false,
      dialogVisible: false,
      show: true,
      count: "",
      timer: null
    };
  },
  components: {
    foot2: foot2
  },
  methods: {
    ...mapActions(["isShow", "isHide", "isLoGin"]),
    getCode() {
      this.$api
        .post(
          this.zs +
            "/gateway/mas/send/sms?func=usrForgetByMobile&mobile=" +
            this.mobile
        )
        .then(res => {});
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    xiugai() {
      var u = this.mobile;
      var p = this.logpwd;
      // var p2=this.logpwd2
      var yzm = this.yzm;
      let num = /^[1]([3-9])[0-9]{9}$/;
      let mima = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;

      //    var obj={uname:u,upwd:p}
      if (!u || !p) {
        this.$message({
          message: "内容不能为空",
          type: "error",
          duration: 1000,
          offset: 320
        });
        return;
      }
      if (!num.test(u)) {
        this.$message({
          message: "电话号码验证码有误,请重写",
          type: "error",
          duration: 1000,
          offset: 320
        });
        return;
      }

      if (!mima.test(p)) {
        this.$message({
          message: "密码格式有误,请重写",
          type: "error",
          duration: 1000,
          offset: 320
        });
        return;
      }
      this.$api
        .post(
          this.zs +
            "/live/forget/pwd/mobile?mobile=" +
            u +
            "&captsms=" +
            yzm +
            "&newpwd=" +
            p
        )
        .then(res => {
          if (res.data.success == true) {
            this.yzm = "";
            this.mobile = "";
            this.logpwd = "";
            this.$router
              .push({
                path: `/`
              })
              .catch(err => {
                err;
              });

            this.isShow();
            this.$message({
              message: "修改密码成功,请登录",
              type: "success",
              duration: 1000,
              offset: 320
            });
          } else {
            this.yzm = "";
            this.$message({
              message: res.data.msgDetail,
              type: "error",
              duration: 1000,
              offset: 320
            });
          }
        });
    }
  },

  watch: {
    // mobile() {
    //   //用正则验证phone变量中的手机号，如果通过
    //   if (/^1[3-9]\d{9}$/.test(this.mobile) == true) {
    //     //就启用msgClass中的success，禁用fail class
    //     this.mobile_err = false;
    //   } else {
    //     //否则如果验证未通过
    //     //就启用msgClass中的fail,禁用success class
    //     this.mobile_err = true;
    //   }
    // },
    logpwd() {
      //用正则验证phone变量中的手机号，如果通过
      if (
        /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(this.logpwd) == true
      ) {
        //就启用msgClass中的success，禁用fail class
        this.logpwd_err = false;
      } else {
        //否则如果验证未通过
        //就启用msgClass中的fail,禁用success class
        this.logpwd_err = true;
      }
    }
  }
};
</script>
<style scoped>
.mobile,
.upwd,
.upwd2 {
  box-sizing: border-box;
  position: relative;
}
.mobile p,
.upwd p,
.upwd2 p {
  position: absolute;
  bottom: -26px;
  left: 85px;
  color: red;
}
li,
ul,
p {
  padding: 0px;
  margin: 0px;
}
li {
  list-style: none;
}
.gray {
  background-color: #f0f0f0;

  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 50px 96px 120px;
}
.white {
  background-color: white;

  height: 100%;
  min-width: 500px;
}
.zc_k {
  width: 460px;
  height: 670px;
  text-align: center;
  margin: auto;
  padding-top: 130px;
  box-sizing: border-box;
  text-align: center;
}
.zc_k ul li input {
  width: 373px;
  height: 45px;
  box-sizing: border-box;
  padding-left: 15px;
}
.zc_k ul li {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 33px;
}
.zc_k ul li:first-child {
  margin-bottom: 45px;
}
.zc_k ul li:nth-child(2) input {
  margin-right: 20px;
}
.phone_tip {
  font-size: 14px;
  color: #666666;
  position: absolute;
  bottom: -28px;
  left: 80px;
}
.title {
  margin-bottom: 56px;
  font-size: 30px;
}
label {
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  color: #333333;
}
.zc_k ul li input.yzm_input,
.zc_k ul li .yzm_button {
  width: 160px;
}
.zc_k ul li .yzm_button {
  background: #0049cd;
  color: white;
  line-height: 45px;
  border-radius: 6px;
}

.zc_bg p {
  width: 380px;
  margin: auto;
  background: url("../../assets/image/login/ljzc.png") no-repeat;
  height: 60px;
  text-align: center;
  color: white;
  position: absolute;
  left: 45px;
  line-height: 45px;
}
</style>